import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { AtGrid, AtAvatar, AtAccordion } from 'taro-ui'
import { connect } from '@tarojs/redux'
import Loader from '../components/Loader'
import { getBpmType } from '../../utils'
import icon1 from '../../assets/icon1.png'
import icon2 from '../../assets/icon2.png'
import icon3 from '../../assets/icon3.png'
import icon4 from '../../assets/icon4.png'
import icon5 from '../../assets/icon5.png'
import icon6 from '../../assets/icon6.png'
import icon7 from '../../assets/icon7.png'
import icon8 from '../../assets/icon8.png'
import icon9 from '../../assets/icon9.png'

import './index.scss'

@connect(({ user }) => ({
  userInfo: user
}), (dispatch) => ({}))
class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }

  constructor () {
    super(...arguments)
    this.state = {
      selfHelpOpen: true,
      AttendanceOpen: true,
    }
  }

  componentWillReceiveProps (nextProps) {
  }

  componentWillUnmount () {
  }

  componentDidMount () {

  }

  componentDidShow () {
  }

  componentDidHide () { }

  handleClick (value, key) {
    let obj = {}
    obj[key] = value
    this.setState(obj)
  }

  onClick (item) {
    Taro.navigateTo({
      url: item.url
    })
  }

  getWorkDaysFromNow (startDate) {
    let startTime = new Date(startDate).getTime()
    let endTime = new Date().getTime()
    return ((endTime - startTime) / 1000 / 3600 / 24).toFixed(0)
  }

  getBackGroundUrl () {
    const hour = new Date().getHours()
    if (hour < 6) {
      return require('../../assets/BackgroundImg1.png')
    } else if (hour < 12) {
      return require('../../assets/BackgroundImg2.png')
    } else if (hour < 18) {
      return require('../../assets/BackgroundImg3.png')
    } else if (hour < 24) {
      return require('../../assets/BackgroundImg4.png')
    } else {
      return require('../../assets/BackgroundImg3.png')
    }
  }

  getBubble () {
    const hour = new Date().getHours()
    if (hour < 6) {
      return '夜深了，记得早点回家哦！'
    } else if (hour < 9) {
      return '早上好，开始一天的计划吧！'
    } else if (hour < 13) {
      return '上午好，又是充满活力的一天！'
    } else if (hour < 14) {
      return '中午好，休息一下，补充能量！'
    } else if (hour < 20) {
      return '下午好，为自己继续努力奋斗！'
    } else if (hour < 24) {
      return '晚上好，为明天做好准备！'
    } else {
      return '您好，感谢您对彰泰的付出！'
    }
  };

  getBackGroundColor () {
    const hour = new Date().getHours()
    if (hour < 6) {
      return '#625f87'
    } else if (hour < 12) {
      return '#26c1b9'
    } else if (hour < 18) {
      return '#c2c27f'
    } else if (hour < 24) {
      return '#2c5797'
    } else {
      return '#c2c27f'
    }
  }

  render () {
    const { userInfo } = this.props
    return (
      (userInfo && userInfo.name) ?
        <View className='index'>
          <View className='header' style={{ backgroundImage: `url(${this.getBackGroundUrl()})` }}>
            <View className='header-info'>
              <View className='header-left'>
                <AtAvatar className='header-left-avatar' circle image={userInfo.avatar} size='large'/>
              </View>
              <View className='header-right'>
                <View className='header-right-name'>{userInfo.name}</View>
                <View className='header-right-note'>{userInfo.orgname} | {userInfo.department}</View>
                <View className='header-right-note'>{this.getBubble()}</View>
              </View>
            </View>
            <View>
              <View className='header-footer' style={{ background: this.getBackGroundColor() }}>
                <View className='header-left-content-days'>
                  与彰泰共同成长<Text
                  className='header-left-content-number'>{this.getWorkDaysFromNow(userInfo.hiredate)}</Text>天
                </View>
              </View>
            </View>
          </View>
          <View style='background: #ffffff' className='body'>
            <AtAccordion
              open={this.state.selfHelpOpen} isAnimation={false} hasBorder={false}
              onClick={(value) => this.handleClick(value, 'selfHelpOpen')}
              title={<div className='title'>
                <div className='delimiter'/>
                自助服务</div>}
            >
              <AtGrid className='main-bg height-max' hasBorder={false} onClick={this.onClick} data={
                [
                  {
                    image: icon3,
                    value: '薪酬查询',
                    url: '/pages/salary/index'
                  },
                  // {
                  //   image: icon1,
                  //   value: '社保查询',
                  //   url: '/pages/socialSecurity/index'
                  // },
                  // {
                  //   image: icon2,
                  //   value: '劳动合同',
                  //   url: '/pages/contract/index'
                  // },
                  {
                    image: icon5,
                    value: '360评分',
                    url: '/pages/360score/index'
                  },
                  {
                    image: icon6,
                    value: '工资卡',
                    url: '/pages/salaryCard/index'
                  },

                ]
              }
              />
            </AtAccordion>
            <AtAccordion
              open={this.state.AttendanceOpen} isAnimation={false} hasBorder={false}
              onClick={(value) => this.handleClick(value, 'AttendanceOpen')}
              title={<div className='title'>
                <div className='delimiter'/>
                考勤</div>}
            >
              <AtGrid className='main-bg height-max' hasBorder={false} onClick={this.onClick} data={
                [
                  // {
                  //   image: icon7,
                  //   value: '考勤查询',
                  //   url: '/pages/attendance/index'
                  // },
                  {
                    image: icon4,
                    value: '请假申请',
                    url: '/pages/leave/index'
                  },
                  // {
                  //   image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
                  //   value: '零星请假查询',
                  //   url: '/pages/sporadicLeave/index'
                  // },
                  // {
                  //   image: icon8,
                  //   value: '加班查询',
                  //   url: '/pages/overtime/index'
                  // },
                  // {
                  //   image: icon9,
                  //   value: '调班查询',
                  //   url: '/pages/shift/index'
                  // },
                ]
              }
              />
            </AtAccordion>
          </View>
        </View> : <Loader/>
    )
  }
}

export default Index
